<template>
  <Dialog
    v-model="dialogVisible"
    title="学习计划详情1"
    width="1000"
    height="800px"
    destroy-on-close
    @close="closeDialog"
  >
    <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
    <Table
      v-model:pageSize="pageSize"
      v-model:currentPage="currentPage"
      :columns="allSchemas.tableColumns"
      :data="dataList"
      :pagination="{
        total: total
      }"
      showAction
      @register="tableRegister"
      @refresh="refresh"
    />

    <template #footer>
      <BaseButton type="primary" @click="getSelections" :loading="loading">提交</BaseButton>
      <BaseButton @click="dialogVisible = false">关闭</BaseButton>
    </template>
  </Dialog>
</template>
<script setup lang="tsx">
import { Dialog } from '@/components/Dialog'
import { MINIO_HTTP } from '@/constants'
import { Search } from '@/components/Search'
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
import { useTable } from '@/hooks/web/useTable'
import { Table, TableColumn, TableSlotDefault } from '@/components/Table'
import { addBatchPlStudyPlanVideoApi, getVideoAddPageListApi } from '@/api/studyPlan/video'
import { ref, defineProps, reactive, onMounted, nextTick, unref } from 'vue'
import { videoTypeListApi } from '@/api/resLibrary/video'
import { ElDialog, ElMessage } from 'element-plus'
const dialogVisible = ref(false)
const { tableRegister, tableState, tableMethods } = useTable({
  immediate: false,
  fetchDataApi: async () => {
    const res = await getVideoAddPageListApi({
      pageNum: unref(currentPage),
      pageSize: unref(pageSize),
      sysVideoType: curRow.value.sysVideoType,
      studyPlanId: curRow.value.id,
      ...searchParams.value
    })
    return {
      list: res.data.records,
      total: res.data.total
    }
  }
})

const { loading, dataList, total, currentPage, pageSize } = tableState
const { getList, setProps, refresh, getElTableExpose } = tableMethods
const columns = reactive<CrudSchema[]>([
  {
    field: 'selection',
    type: 'selection',
    search: {
      hidden: true
    }
  },
  {
    field: 'index',
    label: '序号',
    type: 'index',
    align: 'center',
    headerAlign: 'center',
    search: {
      hidden: true
    }
  },
  {
    field: 'fileName',
    headerAlign: 'center',
    align: 'center',
    label: '名称',
    width: '300',
    search: {
      hidden: true
    }
  },
  {
    field: 'videoTypeName',
    headerAlign: 'center',
    align: 'center',
    width: '200',
    label: '类别',
    search: {
      component: 'Select',
      optionApi: async () => {
        const res = await videoTypeListApi({
          type: curRow.value.sysVideoType
        })
        return res.data.map((v) => ({
          label: v.name,
          value: v.id
        }))
      }
    },
    form: {
      colProps: {
        span: 24
      },
      detail: {
        span: 24
      }
    }
  },
  {
    field: 'videoTime',
    label: '时长(秒)',
    search: { hidden: true },
    headerAlign: 'center',
    align: 'center'
  },
  {
    field: 'thumbnailTime',
    label: '缩略图(帧)',
    search: { hidden: true },
    headerAlign: 'center',
    align: 'center'
  },
  {
    field: 'startPlayTime',
    label: '片头时长',
    search: { hidden: true },
    headerAlign: 'center',
    align: 'center'
  },
  {
    field: 'sortNum',
    label: '排序',
    search: { hidden: true },
    headerAlign: 'center',
    align: 'center'
  }
])

const curRow = ref({})
const searchParams = ref({})
const { allSchemas } = useCrudSchemas(columns)
const setSearchParams = (params: any) => {
  params.videoTypeId = params.videoTypeName
  delete params['videoTypeName']
  searchParams.value = params
  params.sysVideoType = curRow.value.sysVideoType
  params.studyPlanId = curRow.value.id
  getList()
}
const closeDialog = () => {
  searchParams.value = {}
}
const isShowModel = (row, videoType) => {
  row['sysVideoType'] = videoType
  curRow.value = row
  dialogVisible.value = true
  getList()
}

const getSelections = async () => {
  const elTableRef = await getElTableExpose()
  const selections = elTableRef?.getSelectionRows()
  const id = curRow.value.id
  const arr = []
  const saveStudyPlanVideo = {}
  for (const vo of selections) {
    let a = {}
    a['videoId'] = vo.id
    a['videoTypeId'] = vo.videoTypeId
    a['sortNum'] = vo.sortNum
    arr.push(a)
  }
  saveStudyPlanVideo['studyPlanId'] = id
  saveStudyPlanVideo['type'] = curRow.value.sysVideoType
  saveStudyPlanVideo['plStudyPlanVideoVoList'] = arr
  loading.value = true
  addBatchPlStudyPlanVideoApi(saveStudyPlanVideo)
    .then((res) => {
      if (res.code == '00000') {
        dialogVisible.value = false
        ElMessage({ message: '保存成功！', type: 'success' })
      }
    })
    .finally(() => {
      loading.value = false
    })
}
defineExpose({ isShowModel })
</script>
